﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<div th:replace="include/_meta :: div"></div>
	<title>ZK节点查看</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	<link rel="stylesheet" th:href="@{/zTree/css/demo.css}" type="text/css"/>
	<style>
		.treeHeight{
			height: 80%!important;
		}
	</style>
</head>
<body style="height: 800px;">
<input id="flag" type="hidden"/>
<h1 style="margin-top: 20px;" th:text="${clusterName}">
	ZK 集群
</h1>
<div class="row">
	<div style="text-align: left;margin-right: -15px;" class="col-md-6">
		<div style="margin-top: 7px;"><span class="well" style="padding: 0;font-size: 20px;margin-left: 20px;">提示：双击父节点，可以重新加载该节点。</span></div>
	</div>
	<div style="text-align: right;margin-left:-15px;" class="col-md-6">
		<button class="btn btn-success" onclick="window.location=window.location">刷新</button>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<button class="btn btn-success" onclick="window.location=ctx">主页</button>
	</div>
</div>
<div class="container-fluid" style="margin-top: 20px;">

	<div class="row">
		<div class="col-md-12">
			<ul id="treeDemo" class="ztree treeHeight"></ul>
		</div>
	</div>
	<div>
		<div class="col-md-12">
			<div class="col-md-12 well well-sm" style="margin-top: 10px;">
				<div class="row">
					<div class="col-md-9">
						<form class="form-inline" role="form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">路径</div>
									<input class="form-control" id="path" type="text" placeholder="输入 ZK 路径"/>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">值</div>
									<input class="form-control" id="pathVal" type="text" placeholder="输入路径对应的值"/>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-3">
						<button class="btn btn-success" onclick="addZkNode();">添加节点</button>
					</div>
				</div>

				<div class="row" style="margin-top: 20px;display: none" id="nextRow">
					<div class="col-md-9">
						<form>
							<div class="form-group">
								<label for="path2">路径</label>
								<input class="form-control" disabled="disabled" id="path2" type="text"/>
							</div>
							<div class="form-group">
								<label for="pathVal2">值</label>
								<textarea class="form-control" onfocus="removeReadonly(this)" value="aa" readonly = "true"
									   onblur="addReadonly(this)" id="pathVal2" type="text" placeholder="输入路径对应的新值">
									</textarea>
							</div>
						</form>
					</div>
					<div class="col-md-3">
						<button class="btn btn-success" onclick="delZkNode();">删除节点</button>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
<script type="text/javascript" th:inline="javascript">
	var clusterId = [[${clusterId}]];
	// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
	var zNodes;
	var zTreeObj;
	// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
	var setting = {
		callback: {
			onClick: zTreeOnClick,
			onDblClick:zTreeOnDblClick
		}
	};

	$(document).ready(function(){
		getNodes(clusterId);
	});

</script>
</body>
</html>

























